import { nanoid } from 'nanoid';
import React, { Component } from 'react'
import { connect } from "react-redux";
import { creatAddPersonAction } from "../../redux/action/person";

class Person extends Component {

    addPerson = () =>{
        const name = this.nameNode.value;
        const age = this.nageNode.value;
        // console.log(name,age)
        const personObj = {
            id: nanoid(),
            name: name,
            age: age
        }
        this.props.jiayiren(personObj)
    }
    render() {
        return (
            <div>
                <h2>我是person 组件 ，上方求和为 {this.props.he}</h2>
                <input ref={c=>{this.nameNode = c}} type="text" placeholder="请输入姓名" ></input>
                <input  ref={c=>{this.nageNode = c}} type="text" placeholder="请输入年龄"></input>
                <button onClick={this.addPerson}>添加一个人</button>

                <ul>
                   {
                        this.props.yiduiren.map( (p) => {
                            return <li key={p.id}> {p.name} -- {p.age}</li>
                        })
                   }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({yiduiren:state.rens, he: state.he}),
    {jiayiren: creatAddPersonAction}
)(Person);
